.navWrap {
  width: 505.33px;
  height: 500px;
  ul {
    width: 100%;
    height: 100%;
    position: relative;
    li {
      width: 200px;
      height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 0;
      left: 0;
      animation-name: moveX, moveY, scale;
      animation-duration: 10s, 10s, 20s;
      animation-direction: alternate;
      animation-iteration-count: infinite;
      animation-timing-function: cubic-bezier(0.36, 0, 0.64, 1);
      animation-delay: -5s, 0s, 0s;
      img {
        width: 180px;
      }
      span {
        color: white;
      }
    }
  }
}
.animation_paused {
  animation-play-state: paused;
}
@keyframes moveX {
  0% {
    left: 0px;
  }
  100% {
    left: 600px;
  }
}
@keyframes moveY {
  0% {
    top: 0px;
  }
  100% {
    top: 200px;
  }
}
@keyframes scale {
  0% {
    transform: scale(0.4);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.4);
  }
}
.wrap {
  width: 500px;
  height: 400px;
  border: 1px solid #ccc;
  img {
    width: 20%;
  }
}
